<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增账单</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/server.js" ></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }
        .avatar {
            width: 78px;
            height: 78px;
            display: block;
        }
    </style>
</head>
<body>
<div id="div">
	<!--
		新增账单
			添加的账单编码必须唯一，不能重复
			新增账单时供应商从数据表中查询
	-->
    <h4>新增账单</h4>
    <el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="账单编码" prop="billCode">
            <el-input v-model="addForm.billCode" ></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="productName">
            <el-input v-model="addForm.productName" ></el-input>
        </el-form-item>
		<el-form-item label="商品描述" prop="productDesc">
			<el-input type="textarea" v-model="addForm.productDesc"></el-input>
		</el-form-item>
		<el-form-item label="商品数量" prop="productCount">
		    <el-input v-model="addForm.productCount"></el-input>
		</el-form-item>
		<el-form-item label="商品单位" prop="productUnit">
		    <el-select v-model="addForm.productUnit" placeholder="请选择" >
				<el-option
						v-for="item in productUnitList"
						:key="item"
						:label="item"
						:value="item">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="商品总额" prop="totalPrice">
		    <el-input v-model="addForm.totalPrice"></el-input>
		</el-form-item>
		<el-form-item label="是否支付" prop="isPayment">
		    <el-radio v-model="addForm.isPayment" label="1" >未支付</el-radio>
		    <el-radio v-model="addForm.isPayment" label="2" >已支付</el-radio>
		</el-form-item>
		<el-form-item label="供应商" prop="providerId">
		    <el-select v-model="addForm.providerId" placeholder="请选择" >
				<el-option
						v-for="item in providerList"
						:key="item.id"
						:label="item.proName"
						:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
            <el-button @click="resetForm('addForm')">清空</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script type="application/javascript">
    new Vue({
            el: '#div',
            data: {
                addForm: {
                    isPayment: '1',
					productUnit:''
                },
				productUnitList:['瓶','块','斤','袋','个'],
				providerList:[  //供应商从数据库表中查询,此处数据为测试数据
				],
                rules: {
                    billCode: [{
                    	required: true,
                    	message: '请输入账单编码',
                    	trigger: 'blur'
                    }],
                    productName: [{
                    	required: true,
                    	message: '请输入商品名称',
                    	trigger: 'blur'
                    }]
                }
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            //发送请求
							axios.post(
									server_url + "/bill/add",
									this.addForm
							).then(resp=>{
								if(resp.data.flag){
									//给出成功提示
									this.$message.success(resp.data.message);
									//添加结束后清空表单
									this.$refs[formName].resetFields();
								}else{
									this.$message.error(resp.data.message);
								}
							}).catch(err=>{
								console.log(err);
							})

                        }
                    });
                },
				doQueryAllBills(){
					//发送请求到服务端获取所有的供应商
					axios.get(
							server_url + "/bill/providers"
					).then(resp=>{
						if(resp.data.flag){
							//将供应商数据集合显示在下拉框中
							this.providerList = resp.data.data
						}
					}).catch(err=>{
						console.log(err);
					})
				}
            },
			mounted(){
            	this.doQueryAllBills();
			}
        }
    );
</script>
</html>